<template>
    <div class="browse-history-container">
        <h2 class="page-title">浏览记录管理</h2>

        <el-card class="table-card">
            <div class="table-header">
                <div class="table-title"></div>
                <div class="table-actions">
                    <!-- 刷新按钮 -->
                    <div class="action-item" @mouseenter="showTooltip('刷新')" @mouseleave="hideTooltip">
                        <el-button :icon="Refresh" text @click="handleRefresh" />
                        <div v-if="tooltipContent === '刷新'" class="custom-tooltip">刷新</div>
                    </div>

                    <!-- 密度设置 -->
                    <div class="action-item">
                        <el-dropdown trigger="click" @command="handleDensityChange">
                            <el-button :icon="Menu" text />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item
                                        command="default"
                                        :class="{ 'active': tableSize === 'default' }"
                                    >
                                        <el-icon v-if="tableSize === 'default'"><Check /></el-icon>
                                        默认
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        command="medium"
                                        :class="{ 'active': tableSize === 'medium' }"
                                    >
                                        <el-icon v-if="tableSize === 'medium'"><Check /></el-icon>
                                        中等
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        command="small"
                                        :class="{ 'active': tableSize === 'small' }"
                                    >
                                        <el-icon v-if="tableSize === 'small'"><Check /></el-icon>
                                        紧凑
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>

                    <!-- 列设置 -->
                    <div class="action-item">
                        <el-popover placement="bottom" width="220" trigger="click">
                            <template #reference>
                                <el-tooltip content="列设置" placement="top">
                                    <el-button :icon="Setting" text />
                                </el-tooltip>
                            </template>
                            <div class="column-settings">
                                <div class="column-header">
                                    <el-checkbox
                                        v-model="allColumnsChecked"
                                        :indeterminate="isIndeterminate"
                                        @change="handleCheckAllChange"
                                    >
                                        列显示/隐藏
                                    </el-checkbox>
                                </div>
                                <el-divider />
                                <el-checkbox-group
                                    v-model="checkedColumns"
                                    @change="handleCheckedColumnsChange"
                                >
                                    <div v-for="column in columnOptions" :key="column.value" class="column-item">
                                        <el-checkbox :value="column.value">
                                            {{ column.label }}
                                        </el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-popover>
                    </div>
                </div>
            </div>

            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :size="tableSize"
                    v-loading="loading"
                    border
                    stripe
                    empty-text="暂无数据"
                >
                    <el-table-column
                        v-if="showColumn('id')"
                        prop="id"
                        label="序号"
                        width="80"
                        align="center"
                    />
                    <el-table-column
                        v-if="showColumn('username')"
                        prop="username"
                        label="用户名"
                        width="120"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        v-if="showColumn('name')"
                        prop="name"
                        label="名称"
                        width="180"
                    />
                    <el-table-column
                        v-if="showColumn('type')"
                        prop="type"
                        label="类型"
                        width="120"
                    />
                    <el-table-column
                        v-if="showColumn('createTime')"
                        prop="createTime"
                        label="创建时间"
                        width="180"
                    />
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Refresh, Menu, Setting, Check } from '@element-plus/icons-vue'

const tableData = ref([])
const loading = ref(false)
const tableSize = ref('default')

// 列配置
const columnOptions = [
    { value: 'id', label: '序号' },
    { value: 'username', label: '用户名' },
    { value: 'name', label: '名称' },
    { value: 'type', label: '类型' },
    { value: 'createTime', label: '创建时间' }
]

// 列显示控制
const checkedColumns = ref(columnOptions.map(col => col.value))
const allColumnsChecked = computed({
    get: () => checkedColumns.value.length === columnOptions.length,
    set: (val) => {
        checkedColumns.value = val ? columnOptions.map(col => col.value) : []
    }
})
const isIndeterminate = computed(() => checkedColumns.value.length > 0 && checkedColumns.value.length < columnOptions.length)

const handleRefresh = () => {
    loading.value = true
    setTimeout(() => loading.value = false, 800)
}

const handleDensityChange = (size) => {
    tableSize.value = size
}

const handleCheckAllChange = (val) => {
    checkedColumns.value = val ? columnOptions.map(col => col.value) : []
}

const handleCheckedColumnsChange = (value) => {
    const checkedCount = value.length
    allColumnsChecked.value = checkedCount === columnOptions.length
}

const showColumn = (colName) => checkedColumns.value.includes(colName)
</script>

<style scoped>
/* 通用表格样式 */
.page-title {
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 20px;
    color: #333;
    font-weight: 500;
}

.table-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
}

.table-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.table-actions {
    display: flex;
    gap: 16px;
}

.action-item {
    position: relative;
    display: flex;
    align-items: center;
}

.table-wrapper {
    flex: 1;
    overflow: hidden;
}

/* 列设置样式 */
.column-settings {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 8px;
}

.column-item {
    margin: 8px 0;
    padding: 0 8px;
}

/* 工具提示 */
.custom-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #303133;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(5px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .table-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .custom-tooltip {
        top: -35px;
        font-size: 11px;
        padding: 4px 8px;
    }
}
</style>